<template>
  <div class="home" v-if="!!mainData">
    <!-- 导航栏按钮 -->
    <div class="fixedtab">

      <div class="navbar">
        <div class="left" @click="onClickLeft()">
          <img src="./../../assets/icon_shutdown@3x.png" alt>
        </div>
        <div class="title">
          <span>淘金金</span>
        </div>
        <div class="right2" @click="toOld()">
          <span>旧版</span>
        </div>
        <div class="right" @click="onClickRight()">
          <span>{{rightName2}}</span>
        </div>
      </div>

      <!-- tab选项卡 -->
      <van-tabs v-model="active" sticky>
        <van-tab v-for="(item,index) in tabArr" :key="index">
          <div @click="changeSelect(item,index)" slot="title">
            <span>{{item.name}}</span>
            <span :class="{act:active==index}"></span>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 折线图 -->
      <div v-if="active==0" id="map"></div>

      <!-- 列表组件 -->
      <datam :listitem="mainData"></datam>
    </van-pull-refresh>
    <!-- 点击退出，弹出层 -->
    <van-action-sheet
      v-model="showQuit"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"
      @cancel="onCancel"
    />
  </div>
</template>
<script>
  import echarts from 'echarts';
  import option from './../common/option'
  import {mapGetters, mapActions} from "vuex";
  import datam from "./dataList.vue";
  import api from "./../common/api.js";
  import {PullRefresh, ActionSheet, NavBar, Tab, Tabs, Toast} from 'vant';

  Vue.use(PullRefresh, ActionSheet, NavBar);
  Vue.use(Tab).use(Tabs);
  Vue.use(Toast);

  var myechat=null;

  export default {
    data() {
      return {
        active: 0, //选项卡选项
        tabObj: {
          首页: api.param.indexHome,
          助力: api.param.boostindex,
          赚赚: api.param.earnindex,
          "1元拼团": api.param.indexOnePrice
        },
        tabArr: [], //tab数组
        showQuit: false, //显示弹出层
        isLoading: false, //加载中
        mainData: {},
        newxArr:[
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23"
        ],
        actions: [
          {
            name: "确认退出"
          }
        ]
      };
    },
    computed: mapGetters(["rightName2"]),
    components: {
      datam
    },
    destroyed() {
      // this.myChart.clear();
      // option.option.linmapData=null;
      myechat.clear();
      this.mainData=null;
    },

    mounted() {
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      window.sessionStorage.removeItem("seceondClick2");
      this.initData();
    },
    methods: {
      initData() {

        this.$fetch.getDataNew(api.apiUrl, api.param.TopBar, mdata => {
          if (mdata.result == 1) {
            this.tabArr = mdata.data;
            this.$fetch.getDataNew(
              api.apiUrl,
              this.tabObj[this.tabArr[0].name],
              data => {

                if (data.result == 1) {

                  window.localStorage.setItem(
                    "reloadItem2",
                    JSON.stringify(this.tabArr[0])
                  );
                  if (this.tabArr[0].name == "首页") {
                    this.dealdata(data, this.tabArr[0].name);
                  } else {
                    this.dealdata(data, this.tabArr[0].name);
                  }
                } else {
                  Toast(data.message)
                }
              }
            );
          } else {
            Toast(data.message)
          }
        });
      },
      dealdata(data, name) {
        window.localStorage.setItem("selectItem2", name);
        var savData = (savData = window.localStorage.getItem("saveSelect2" + name)
          ? JSON.parse(window.localStorage.getItem("saveSelect2" + name))
          : null);

        if (name != "首页") {
          if (!!savData) {
            savData.data.forEach((v, index) => {
              for (let key in v.data) {
                data.data[index].data[key].itemSelected =
                  v.data[key].itemSelected;
              }
            });
          } else {
            data.data.forEach((v, index) => {
              for (let key in v.data) {
                v.data[key].itemSelected = false;
              }
            });
          }

          this.mainData = data;
        } else {
          if (!!savData) {
            savData.data.forEach((v, index) => {
              if (index == 0) {
                for (let key in v.data) {
                  data.data[index].data[key].itemSelected =
                    v.data[key].itemSelected;
                }
              } else {
                for (let key in v) {
                  if (key != "title") {
                    data.data[index][key].itemSelected = v[key].itemSelected;
                  }
                }
              }
            });
          } else {
            data.data.forEach((v, index) => {
              if (index == 0) {
                for (let key in v.data) {
                  v.data[key].itemSelected = false;
                }
              } else {
                for (let key in v) {
                  if (key != "title") {
                    v[key].itemSelected = false;
                  }
                }
              }
            });
          }
          this.mainData = data;

          this.mainData.isshow = true;

          this.mainData.chartList.today = this.mainData.chartList.today;
          this.mainData.chartList.yesterday = this.mainData.chartList.yesterday;
          // var myChart = echarts.init(document.getElementById("map"),null,{renderer:'svg'});
          myechat = echarts.init(document.getElementById("map"));
          // 使用刚指定的配置项和数据显示图表。
          var yesterdayValueArr = [],
            todayValueArr = [];
          var tparr={a:[],b:[]};

          for (var i=0;i<24;i++){
            var obj1={};
            obj1.time=i;
            obj1.total=null;
            if (this.mainData.chartList.today.length!=0){
              for (let j = 0; j <this.mainData.chartList.today.length ; j++) {
                if (this.mainData.chartList.today[j].time==i){
                  obj1.time=i;
                  obj1.total=this.mainData.chartList.today[j].total;
                }
              }
            }
            var obj2={};
            obj2.time=i;
            obj2.total=null;
            if (this.mainData.chartList.yesterday.length!=0){
              for (let j = 0; j <this.mainData.chartList.yesterday.length ; j++) {
                if (this.mainData.chartList.yesterday[j].time==i){
                  obj2.time=i;
                  obj2.total=this.mainData.chartList.yesterday[j].total;
                }
              }
            }
            tparr.a.push(obj1);
            tparr.b.push(obj2);
          }

          this.mainData.chartList.today =tparr.a;
          this.mainData.chartList.yesterday =tparr.b;

          this.mainData.chartList.yesterday.forEach((v, index) => {
            if (v.total&&v.total.indexOf(",") > -1) {
              v.total = v.total.replace(/,/g, "");
            }
            v.total=v.total?parseFloat(v.total):v.total;
            yesterdayValueArr.push(parseFloat(v.total));
          });
          this.mainData.chartList.today.forEach((v, index) => {
            if (v.total&&v.total.indexOf(",") > -1) {
              v.total = v.total.replace(/,/g, "");
            }
            v.total=v.total?parseFloat(v.total):v.total;
            todayValueArr.push(parseFloat(v.total));
          });

          if (
            Math.max(...yesterdayValueArr) > 10000 ||
            Math.max(...todayValueArr) > 10000
          ) {
            yesterdayValueArr = yesterdayValueArr.map(v => {
              return v?(v / 10000).toFixed(6):v;
            });
            todayValueArr = todayValueArr.map(v => {
              return v?(v / 10000).toFixed(6):v;
            });
            option.option.linmapData.yAxis[0].name = "万";
          }

          option.option.linmapData.title.text = this.mainData.chartList.perMinuteOrderNum;
          option.option.linmapData.xAxis[0].data = this.newxArr;
          option.option.linmapData.series[1].data = yesterdayValueArr;
          option.option.linmapData.series[0].data = todayValueArr;
          myechat.setOption(option.option.linmapData);
          this.$forceUpdate();
        }
      },
      changeSelect(item, index) {
        window.localStorage.setItem("reloadItem2", JSON.stringify(item));
        var obj = (obj = {
          url: api.apiUrl,
          data: this.tabObj[item.name]
        });

        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
        this.$fetch.getDataNew(obj.url, obj.data, data => {
          this.active = index;
          if (item.name == "首页") {
            this.dealdata(data, item.name);
          } else {
            this.dealdata(data, item.name);
          }
        });
      },
      onClickLeft() {
        this.showQuit = true;
      },
      onClickRight() {
        this.$store.dispatch("showhight2");
      },
      toOld(){
        this.$router.push({path:'/home'})
      },
      onSelect(item) {
        // 点击选项时默认不会关闭菜单，可以手动关闭
        window.webkit.messageHandlers.loginout.postMessage("loginout");
      },
      onCancel() {
        this.showQuit = false;
      },
      onRefresh() {
        setTimeout(() => {
          this.isLoading = false;
          this.changeSelect(
            JSON.parse(window.localStorage.getItem("reloadItem2")),
            this.active
          );
        }, 500);
      }
    }
  };
</script>
<style lang="stylus" scoped>
  #map {
    width: 100vw;
    height: 8rem;
    padding-top: 20px;
  }
</style>
